<template>
  <div id="top-header">
    <dv-decoration-8 class="header-left-decoration" />
    <dv-decoration-5 class="header-center-decoration" />
    <dv-decoration-8 class="header-right-decoration" :reverse="true" />
    <div class="center-title">医用耗材SPD运营中心</div>
    <div class="top-header-right">{{datetime}}</div>

  </div>
</template>

<script>
export default {
  name: 'TopHeader',
  data() {
    return {
      datetime: '',
      //是否全屏展示
      fullscreen: false
    }
  },
  methods: {
    //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
    dateFormat() {
      let date = new Date()
      let year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
        * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
        * */
      let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      this.datetime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
    },

  },
  mounted() {
    const { dateFormat } = this
    dateFormat()
    setInterval(dateFormat, 1000)
  },
}
</script>

<style lang="scss">
#top-header {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;

  .header-center-decoration {
    width: 40%;
    height: 60px;
    margin-top: 30px;
  }

  .header-left-decoration, .header-right-decoration {
    width: 25%;
    height: 60px;
  }

  .center-title {
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
  }
  .top-header-right {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    right: 2%;
    top: 65%;
  }
}
</style>
